<template>
  <div id="zzbz-center-board">
    <div class="center-board-title">各地区周转编制使用情况</div>
    <div id="centerEchart"></div>
  </div>
</template>

<script>
import Sever from '@/api/selfApi'
export default {
  props: {
    depCode: {
      type: String
    }
  },
  data() {
    return {
      myEchart: null
    }
  },
  watch: {
    depCode(newValue, oldValue) {
      this.initData()
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    async initData() {
      //请求后台返回数据
      try {
        //请求后台接口
        const res = await Sever.zzbz.getZzbzUseState({
          dep_code: this.depCode
        })
        console.log(res)
        const list = res

        var deps = []
        res.forEach((element) => {
          deps.push(element.DEP_NAME)
        })
        console.log(deps)

        const option = {
          grid: {
            left: '30',
            top: '30',
            bottom: '30',
            right: '30',
            containLabel: true
          },
          // 鼠标移入提示框
          tooltip: {
            trigger: 'axis',
            backgroundColor: '#05050F', // 提示框背景色
            borderColor: '#05050F', // 提示框边框色
            textStyle: {
              color: '#fff' // 提示框文本颜色
            },
            formatter: (params) => {
              // 自定义tooltip小圆点
              const dotHtml1 =
                '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#336699"></span>'
              const dotHtml2 =
                '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#63caff"></span>'
              const time = `<p style="text-align:center;margin:0">2021年12月22日</p>`
              const result = `${dotHtml1} ${params[0].seriesName} : ${params[0].value}  &nbsp;&nbsp;|&nbsp;&nbsp;  ${dotHtml2} ${params[1].seriesName} : ${params[1].value}`
              return result
            },
            axisPointer: {
              type: 'none'
            }
          },
          // 图列组件
          legend: {
            bottom: 0, // 图列项的位置
            itemGap: 50, // 图列项之间的间距
            icon: 'circle', // 图列项的形状
            itemWidth: 8, // 图列项的大小
            textStyle: {
              fontSize: 14,
              color: '#fff'
            }
          },
          // x轴
          xAxis: [
            {
              type: 'category',
              axisTick: {
                show: false // 不显示刻度线
              },
              axisLabel: {
                fontSize: 14,
                color: '#fff',
                interval: 0 // 强制显示所有刻度标签
              },
              data: deps
            }
          ],
          // y轴
          yAxis: [
            {
              splitLine: { show: false },
              axisLabel: {
                fontSize: 14,
                color: '#fff'
              },
              type: 'value',
              // min: 0,
              // max: 400
            }
          ],
          series: [
            {
              name: '下达编制数',
              type: 'bar',
              // stack: 'company',
              barWidth: '40%',
              itemStyle: {
                color: '#26B2E8',
                opacity: 0.7,
                barBorderRadius: 25
              },
              label: {
                show: true,
                position: 'top',
                color: '#fff'
              },
              data: list.map((item) => {
                return {
                  name: item.DEP_NAME,
                  value: item.ZZBZS
                }
              })
            },
            {
              name: '已使用',
              type: 'bar',
              z: 10000,
              // stack: 'company',
              barGap: '-100%',
              barWidth: '40%',
              itemStyle: {
                color: '#63caff',
                barBorderRadius: 25
              },
              data: list.map((item) => {
                return {
                  name: item.DEP_NAME,
                  value: item.SYRY
                }
              })
            }
          ]
        }

        this.myEchart = this.$echarts.init(
          document.getElementById('centerEchart')
        )
        this.myEchart.setOption(option)
        window.addEventListener('resize', () => this.myEchart.resize(), false)
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="scss">
#zzbz-center-board {
  width: calc(60% - 30px);
  margin-left: 15px;
  margin-right: 15px;
  box-sizing: border-box;
  height: 100%;
  background-color: rgba(1, 35, 102, 0.9);
  //background-color: #012366;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .center-board-title {
    font-weight: bold;
    height: 50px;
    border-bottom: #336699 1px solid;
    display: flex;
    align-items: center;
    font-size: 18px;
    justify-content: center;
  }
}
#centerEchart {
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
}
</style>
